<template>
    <div class="goods-hot-wrap">
      <h3>{{title}}</h3>
      <div class="goods-hot-list" v-if="hotGoodsList">
        <TridentGoodsItem v-for="item in hotGoodsList" :key="item.id" :goods="item"/>  
      </div>  
    </div>
</template>


<script setup>
import { computed, ref, onMounted } from 'vue'
import {reqGetGoodsListAPI} from '@/apis/goods'


const props = defineProps({
    type: {
        type: Number,
        default: 1
    }
})

const titleObj = { 1: '24小时热销榜', 2: '总热销榜', 11: '周热销榜' }
const title = computed(() => {
    return titleObj[props.type]
})

const hotGoodsList = ref([])

const getGoods = async () => {
  const result = await reqGetGoodsListAPI({goods_label_id: props.type, page_size: 4})
  if (result.code == 200) {
    let goodsItems = result.data.goods != null ? result.data.goods : []
    goodsItems.forEach(item => {
        item.sales_num = 10000
    })

    hotGoodsList.value = goodsItems
  }
}

onMounted(() => {
  getGoods()
})
</script>
  
<style scoped lang="scss">
.goods-hot-wrap {
  h3 {
    height: 70px;
    background: $help-color;
    color: #fff;
    font-size: 18px;
    line-height: 70px;
    padding-left: 25px;
    margin-bottom: 10px;
    font-weight: normal;
  }
  
  ::v-deep(.goods-item-wrap) {
    width: 250px;
    margin: 10px auto;
    background-color: #fff;
  }
}
</style>